<template>
  <div>
    <Menu mode="horizontal" v-model:selectedKeys="current">
      <MenuItem key="profile">
        <template #icon>
          <Icon icon="material-symbols:person" />
        </template>
        属性
      </MenuItem>
      <MenuItem key="security">
        <template #icon> <Icon icon="material-symbols:lock" /> </template>安全
      </MenuItem>
      <MenuItem key="notification"
        ><template #icon> <Icon icon="fa:gear" /> </template>通知设置</MenuItem
      >
    </Menu>
    <Profile v-if="current.includes('profile')" />
    <Security v-if="current.includes('security')" />
    <Notification v-if="current.includes('notification')" />
  </div>
</template>
<script lang="ts" setup>
  import { Menu, MenuItem } from 'ant-design-vue';
  import { ref } from 'vue';
  import Icon from '/@/components/Icon';
  import Profile from './components/Profile.vue';
  import Security from './components/Security.vue';
  import Notification from './components/Notification.vue';
  const current = ref<string[]>(['profile']);
</script>
